<template>
	<div id="app">
		<v-app id="inspire">
			<!-- 			<v-app-bar app color="#FF5252">
				<v-list-item-title style="text-align:center;font-size:18px;color:white;">我的</v-list-item-title>
			</v-app-bar> -->
			<v-card class="mx-auto" style="width:100%;" outlined>
				<v-list-item>
					<!-- 绑定放头像和昵称、个人签名 -->
					<v-list-item-avatar><v-img :src="avatar"></v-img></v-list-item-avatar>
					<v-list-item-content>
						<v-list-item-title class="headline">您好,<span>{{name}}</span>
							<span style="position:absolute;z-index:100;right: 15px;" @click="goInfomation">
								<icon name="arrow-right" scale="3"></icon>
							</span></v-list-item-title>
					</v-list-item-content>
				</v-list-item>

				<v-img src="../../../static/my/my_001.jpg"></v-img>

				<v-card-text>
					<p style="text-indent:2em;">{{sign}}</p>
				</v-card-text>
			</v-card>
			<v-card style="width:100%;" outlined>
				<v-list two-line subheader>

					<v-list-item style="max-height: 30px;">

						<v-list-item-icon>
							<icon name="assets" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>我的资产</v-list-item-title>
						</v-list-item-content>

					</v-list-item>

				</v-list>
				<v-divider></v-divider>
				<div style="width:100%;text-align: center;">
					<!-- 绑定真实的积分 折扣 -->
					<p><span style="color: #747577;">积分:{{integral}}</span><span style="margin-left:25%;color: #747577;">折扣:{{discount}}折优惠</span></p>
				</div>
			</v-card>

			<v-card class="mx-auto" style="width:100%;margin-top:10px" outlined>
				<v-list two-line subheader>

					<v-list-item style="max-height: 30px;">

						<v-list-item-icon>
							<icon name="collection" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>我的收藏</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/collection'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

					<v-list-item style="max-height: 50px;">

						<v-list-item-icon>
							<icon name="order" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>我的订单</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/house_order'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

					<v-list-item style="max-height: 50px;">

						<v-list-item-icon>
							<icon name="exchange" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>我的兑换</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/my_exchange'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

					<v-list-item style="max-height: 50px;">
						<v-list-item-icon>
							<icon name="identity_authentication" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>身份认证</v-list-item-title>
						</v-list-item-content>
						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/identity'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

				</v-list>
				<div style="width:100%;text-align: center;">
				</div>
			</v-card>

			<v-card class="mx-auto" style="width:100%;margin-top:10px;" outlined>

				<v-list two-line subheader>

					<v-list-item style="max-height: 50px;">
						<v-list-item-icon>
							<icon name="myhouse" scale="3"></icon>
						</v-list-item-icon>
						<!-- 点击需要判断用户是否实名认证 -->
						<v-list-item-content>
							<v-list-item-title>我的出租</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/my_house'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>
					<v-list-item style="max-height: 50px;">
						<v-list-item-icon>
							<icon name="request" scale="3"></icon>
						</v-list-item-icon>
						<!-- 点击需要判断用户是否实名认证 -->
						<v-list-item-content>
							<v-list-item-title>看房申请</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/see_house_request'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>
				</v-list>
			</v-card>

			<v-card class="mx-auto" style="width:100%;margin-top:10px;" outlined>

				<v-list two-line subheader>

					<v-list-item style="max-height: 50px;">

						<v-list-item-icon>
							<icon name="address" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>收货地址</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/address'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

					<v-list-item style="max-height: 50px;">
						<v-list-item-icon>
							<icon name="password" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title>修改密码</v-list-item-title>
						</v-list-item-content>
						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/change_password'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

					<v-list-item style="max-height: 50px;">
						<v-list-item-icon>
							<icon name="about" scale="3"></icon>
						</v-list-item-icon>
						<!-- 点击需要判断用户是否实名认证 -->
						<v-list-item-content>
							<v-list-item-title>关于我们</v-list-item-title>
						</v-list-item-content>

						<v-list-item-action>
							<v-btn icon router-link :to="{ path: '/mine/about'}">
								<icon name="arrow-right" scale="3"></icon>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

					<v-list-item style="max-height: 50px;">
						<v-list-item-icon>
							<icon name="loginout" scale="3"></icon>
						</v-list-item-icon>

						<v-list-item-content>
							<v-list-item-title @click="loginOut">退出登录</v-list-item-title>
						</v-list-item-content>
						<v-list-item-action>
							<v-btn icon router-link>
							</v-btn>
						</v-list-item-action>
					</v-list-item>

				</v-list>
			</v-card>
		</v-app>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
		
		
	</div>

</template>

<script>
	import axios from "axios";
	
	export default {
		name: "Mine",
		data() {
			return {
				information: "information",
				historyOrder: "historyOrder",
				cart: "cart",
				discount: "",
				sign:'',
				avatar:'',
				integral:'',
				name:'',
				message:'',
				timeout:1000,
				snackbar:false
			};
		},
		methods: {
			goInfomation() {
				this.$router.replace({
					path: "/mine/information/"
				});
			},
			goLogin() {
				this.$router.replace({
					path: "/login"
				});
			},
			getUserInfo() {
				let _this = this
				axios
					.get("/api/v1.0/user/get_user")
					.then(function(response) {
						if (response.data.errno === '0') {
							_this.name = response.data.data.name;
							_this.sign = response.data.data.sign;
							_this.integral = response.data.data.integral;
							_this.avatar = response.data.data.avatar;
							_this.discount = response.data.data.discount;
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							_this.snackbar = true;
							_this.message = response.data.errmsg;
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			},
			loginOut(){
				let _this = this;
				axios
					.delete("/api/v1.0/login_out")
					.then(function(response){
						if (response.data.errno === '0'){
							// 修改账号后注销登录返回到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						}
					})
			}
		},
		mounted() {
			this.getUserInfo();
		}
		// ,
		// beforeRouteLeave(to, from, next) {
		// 	if (to.path == "/mine/house_order/all_order" || to.path =="/mine/house_order") {
		// 		to.meta.keepAlive = false;
		// 	}
		// 	next();
		// }
		
	};
</script>

<style scoped>
	.v-list--two-line .v-list-item,
	.v-list-item--two-line {
		min-height: 58px !important;
	}

	.v-list {
		padding: 0
	}

	.v-application p {
		margin-bottom: 5px !important;
	}
</style>
